import React, { useState, useEffect } from 'react';
import { Card, Row, Col } from 'antd';
import { Column, Heatmap, Line, Pie } from '@ant-design/charts';

const list = [
  { month: '1月', borrowCount: 38 },
  { month: '2月', borrowCount: 52 },
  { month: '3月', borrowCount: 61 },
  { month: '4月', borrowCount: 145 },
  { month: '5月', borrowCount: 48 },
  { month: '6月', borrowCount: 38 },
  { month: '7月', borrowCount: 38 },
  { month: '8月', borrowCount: 38 },
  { month: '9月', borrowCount: 38 },
  { month: '10月', borrowCount: 38 },
  { month: '11月', borrowCount: 38 },
  { month: '12月', borrowCount: 38 },
];

const heatData = [
  { x: '1月', y: '新摄影笔记	', value: 10 },
  { x: '1月', y: '梵高手稿	', value: 19 },
  { x: '2月', y: '新摄影笔记	', value: 8 },
  { x: '2月', y: '梵高手稿	', value: 15 },
  { x: '3月', y: '新摄影笔记	', value: 13 },
  { x: '3月', y: '梵高手稿	', value: 22 },
  { x: '4月', y: '新摄影笔记	', value: 20 },
  { x: '4月', y: '梵高手稿	', value: 30 },
  { x: '5月', y: '新摄影笔记	', value: 25 },
  { x: '5月', y: '梵高手稿	', value: 35 },
  { x: '6月', y: '新摄影笔记	', value: 30 },
  { x: '6月', y: '梵高手稿	', value: 40 },
  { x: '7月', y: '新摄影笔记	', value: 35 },
  { x: '7月', y: '梵高手稿	', value: 45 },
  { x: '8月', y: '新摄影笔记	', value: 40 },
  { x: '8月', y: '梵高手稿	', value: 50 },
  { x: '9月', y: '新摄影笔记	', value: 45 },
  { x: '9月', y: '梵高手稿	', value: 55 },
  { x: '10月', y: '新摄影笔记	', value: 50 },
  { x: '10月', y: '梵高手稿	', value: 60 },
  { x: '11月', y: '新摄影笔记	', value: 55 },
  { x: '11月', y: '梵高手稿	', value: 65 },
  { x: '12月', y: '新摄影笔记	', value: 60 },
  { x: '12月', y: '梵高手稿	', value: 70 },
];

const Stats = () => {
  const [borrowData, setBorrowData] = useState<any>(list);
  const [heatmapData, setHeatmapData] = useState<any>(heatData);

  const columnConfig = {
    data: borrowData,
    xField: 'month',
    yField: 'borrowCount',
    label: {
      position: 'top',
      style: {
        fill: '#FFFFFF',
        opacity: 0.6,
      },
    },
    meta: {
      month: { alias: '月份' },
      borrowCount: { alias: '借阅量' },
    },
  };

  const heatmapConfig = {
    data: heatmapData,
    xField: 'x',
    yField: 'y',
    colorField: 'value',
    color: ['#d3f261', '#faad14', '#f5222d'],
    meta: {
      x: { alias: '月份' },
      y: { alias: '书籍' },
      value: { alias: '热度' },
    },
  };

  const overdueData = [
    { month: '1月', overdueCount: 5 },
    { month: '2月', overdueCount: 8 },
    { month: '3月', overdueCount: 12 },
    { month: '4月', overdueCount: 20 },
    { month: '5月', overdueCount: 15 },
    { month: '6月', overdueCount: 10 },
    { month: '7月', overdueCount: 7 },
    { month: '8月', overdueCount: 9 },
    { month: '9月', overdueCount: 11 },
    { month: '10月', overdueCount: 13 },
    { month: '11月', overdueCount: 14 },
    { month: '12月', overdueCount: 16 },
  ];


  const config = {
    data: overdueData,
    xField: 'month',
    yField: 'overdueCount',
    point: {
      size: 5,
      shape: 'diamond',
    },
    label: {
      style: {
        fill: '#aaa',
      },
    },
    tooltip: {
      showMarkers: true,
    },
    smooth: true,
  };

  // 圆环
  const preferenceData = [
    { type: '文学', value: 27 },
    { type: '历史', value: 25 },
    { type: '科学', value: 18 },
    { type: '艺术', value: 15 },
    { type: '技术', value: 10 },
    { type: '其他', value: 5 },
  ];

  const userConfig = {
    appendPadding: 10,
    data: preferenceData,
    angleField: 'value',
    colorField: 'type',
    radius: 1,
    innerRadius: 0.6,
    label: {
      // type: 'inner',
      offset: '-30%',
      content: ({ percent }:any) => `${(percent * 100).toFixed(0)}%`,
      style: {
        textAlign: 'center',
        fontSize: 14,
      },
    },
    interactions: [{ type: 'element-active' }],
    statistic: {
      title: {
        offsetY: -4,
        style: {
          fontSize: '14px',
        },
        formatter: () => '总计',
      },
      content: {
        offsetY: 4,
        style: {
          fontSize: '24px',
        },
        formatter: () => `${preferenceData.reduce((a, b) => a + b.value, 0)}`,
      },
    },
  };
  return (
    <div style={{ padding: '20px' }}>
      <Row gutter={16}>
        <Col span={12}>
          <Card title="图书借阅量">
            <Column {...columnConfig} />
          </Card>
        </Col>
        <Col span={12}>
          <Card title="图书热度图">
            <Heatmap {...heatmapConfig} />
          </Card>
        </Col>
      </Row>

      <Row gutter={16}  style={{paddingTop: 15}}>
        <Col span={12}>
          <Card title="每月总图书逾期数">
            <Line {...config} />
          </Card>
        </Col>
        <Col span={12}>
          <Card title="用户偏好书类">
            <Pie {...userConfig} />
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default Stats;